<script>
    import { onMount, onDestroy } from 'svelte';
    import { mapEventBus } from '../../eventbus/map_signal.js';
    
    let toastQueue = []; // 存储通知队列
    const MAX_TOASTS = 3; // 最大同时显示的通知数
    
    const typeStyles = {
        info: {
            background: 'rgba(0, 0, 0, 0.8)',
            color: '#ffffff',
            borderColor: '#333333'
        },
        success: {
            background: 'rgba(39, 174, 96, 0.9)',
            color: '#ffffff',
            borderColor: '#27ae60'
        },
        warning: {
            background: 'rgba(241, 196, 15, 0.9)',
            color: '#ffffff',
            borderColor: '#f1c40f'
        },
        error: {
            background: 'rgba(231, 76, 60, 0.9)',
            color: '#ffffff',
            borderColor: '#e74c3c'
        }
    };

    function handleShowToast(toastData) {
        const newToast = {
            id: Date.now(),
            message: toastData.message,
            type: toastData.type || 'info',
            duration: toastData.duration || 3000
        };
        
        // 添加新通知到队列
        toastQueue = [...toastQueue, newToast];
        
        // 设置自动移除
        setTimeout(() => {
            toastQueue = toastQueue.filter(toast => toast.id !== newToast.id);
        }, newToast.duration);
    }

    onMount(() => {
        mapEventBus.on('show-toast', handleShowToast);
    });

    onDestroy(() => {
        mapEventBus.off('show-toast', handleShowToast);
    });
</script>

<div class="toast-container">
    {#each toastQueue.slice(-MAX_TOASTS) as toast (toast.id)}
        <div 
            class="toast"
            style:background-color={typeStyles[toast.type].background}
            style:color={typeStyles[toast.type].color}
            style:border-color={typeStyles[toast.type].borderColor}
        >
            <div class="message">{toast.message}</div>
        </div>
    {/each}
</div>

<style lang="less">
    .toast-container {
        position: fixed;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        z-index: 9999;
        pointer-events: none;
    }

    .toast {
        max-width: 80vw;
        min-width: 300px;
        padding: 16px 24px;
        border-radius: 8px;
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        text-align: center;
        animation: slideDown 0.5s ease, fadeOut 0.5s ease forwards;
        animation-delay: 0s, calc(var(--duration, 3000ms) - 500ms);
        
        .message {
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 0.5px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }
    }

    @keyframes slideDown {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
</style>